<template>
    <div class="shop_info">
      <!-- 对私法人账户-->
      <van-form
        @submit="onSubmit"
        error-message-align="right"
        input-align="right"
      >
        <div class="enterise_info_title"><span>*</span>结算卡信息</div>
        <div style="display: flex;">
                <van-field name="front_url" label="" label-width="0.01rem" style="padding-bottom: 0.6rem;"
                    :border="false" :rules="[{ required: true, message: '不能为空' }]">
                    <template #input>
                        <van-uploader v-model="front_url" :max-count="1" preview-size="100%" :after-read="afterReadFront"
                        :before-delete="uploadDleteFront">
                            <img src="../../../../images/mine/tianjia1.png" alt="" class="tianjia_pic">
                        </van-uploader>
                        <div class="tianjia_text">结算人身份证正面</div>
                    </template>
                </van-field>
                <van-field name="back_url" label="" label-width="0.01rem" style="padding-bottom: 0.6rem;"  :border="false"
                :rules="[{ required: true, message: '不能为空' }]">
                    <template #input>
                        <van-uploader v-model="back_url" :max-count="1" preview-size="100%" :after-read="afterReadBack"
                    :before-delete="uploadDleteBack">
                        <img src="../../../../images/mine/tianjia1.png" alt="" class="tianjia_pic">
                    </van-uploader>
                    <div class="tianjia_text">结算人身份证反面</div>
                    </template>
                </van-field>
            </div>
            <van-field v-model="settler_data.name" name="name" label="法人姓名" placeholder="请输入法人姓名"
            readonly :rules="[{ required: true, message: '请输入法人姓名' }]" />
            <van-field v-model="settler_data.identity_card_no" name="identity_card_no" label="身份证号" placeholder="请输入身份证号"
            readonly :rules="[{ required: true, message: '身份证号' }]" />
                <!-- @click="showPickerCard = true" @click="showPickerCardTime = true"  @click="showPickerCardEndTime = true" -->
            <van-field readonly clickable is-link name="duration_type" :value="settler_data.duration_type" label="期限类型" placeholder="请选择"
            :rules="[{ required: true, message: '期限类型' }]"/>
            <van-field label-width="3.2rem" readonly clickable is-link v-model="settler_data.issue_date" name="issue_date" label="身份证发放日期"
                placeholder="身份证发放日期" :rules="[{ required: true, message: '身份证发放日期' }]"
                />
            <van-field label-width="3.2rem" readonly clickable is-link v-model="settler_data.expiry_date" name="expiry_date" label="身份证有效日期"
                placeholder="身份证有效日期" :rules="[{ required: true, message: '身份证有效日期' }]"
               />
        <div class="enterise_info_title" style="text-align:center">请绑定结算人所属银行卡</div>
        <van-field
          name="card_url"
          label=""
          label-width="0.01rem"
          :border="false"
           :rules="[{ required: true, message: '不能为空' }]"
        style="padding-bottom: 0.6rem;"

        >
          <template #input>
            <van-uploader
              v-model="card_url"
              :max-count="1"
              preview-size="100%"
              :after-read="afterReadFrontCard"
              :before-delete="uploadDleteFrontCard"
            >
              <img
                src="../../../../images/mine/tianjia.png"
                alt=""
                class="tianjia_pic"
              />
            </van-uploader>
            <div class="tianjia_text1">银行卡正面</div>
          </template>
        </van-field>
        <van-field
        name="bank_back_url"
        label=""
        label-width="0.01rem"
        style="padding-bottom: 0.6rem;"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <template #input>
          <van-uploader
            v-model="bank_back_url"
            :max-count="1"
            preview-size="100%"
            :after-read="afterReadBackBank"
            :before-delete="uploadDleteBackBank"
          >
            <img
              src="../../../../images/mine/tianjia.png"
              alt=""
              class="tianjia_pic"
            />
          </van-uploader>
          <div class="tianjia_text1">银行卡反面</div>
        </template>
      </van-field>
      <van-field
        name="owner_hold_url"
        label=""
        label-width="0.01rem"
        style="padding-bottom: 0.6rem;"
        :rules="[{ required: true, message: '不能为空' }]"
      >
        <template #input>
          <van-uploader
            v-model="owner_hold_url"
            :max-count="1"
            preview-size="100%"
            :after-read="afterReadOwner"
            :before-delete="uploadDleteOwner"
          >
            <img
              src="../../../../images/mine/tianjia.png"
              alt=""
              class="tianjia_pic"
            />
          </van-uploader>
          <div class="tianjia_text1">手持银行卡</div>
        </template>
      </van-field>
        <div style="display: flex;">
                <van-field name="authorize_url" label="" label-width="0.01rem" style="padding-bottom: 0.6rem;"
                    :border="false" :rules="[{ required: true, message: '不能为空' }]">
                    <template #input>
                        <van-uploader v-model="authorize_url" :max-count="1" preview-size="100%"  :after-read="afterReadFrontAuth"
                        :before-delete="uploadDleteFrontAuth">
                            <img src="../../../../images/mine/tianjia1.png" alt="" class="tianjia_pic">
                        </van-uploader>
                        <div class="tianjia_text" style="text-align: center;">请添加授权书</div>
                    </template>
                </van-field>
                <van-field  label="" label-width="0.01rem" style="padding-bottom: 1rem;">
                    <template #input>
                        <img  @click="getExample('merchant_reckoner_authorization')" :src="example.content" alt="" class="tianjia_pic">
                        <div class="tianjia_text" style="bottom: -50px;left: 50%;text-align: left;">请预览并下载授权书，填写完整后拍照上传
                        </div>
                    </template>
                </van-field>
            </div>
        <!-- <div class="enterise_info_title">营业执照</div> -->
        <van-field
          v-model="bank_name"
          name="bank_name"
          readonly
          label="开户银行"
          placeholder="开户银行名称"
          :rules="[{ required: true, message: '开户银行名称' }]"
          @click="showPickerBank = true"
        />
        <van-field
          v-model="region_name"
          name="region_name"
          readonly
          label="开户地区"
          is-link
          placeholder="请选择"
          @click="showPopup = true"
        />
        <div class="search-container">
          <van-field
            v-model="branch_name"
            placeholder="请输入支行"
            @input="debouncedSearch"
            :loading="isLoading"
            name="branch_name"
            autocomplete="off"
            label="开户支行"
            :rules="[{ required: true, message: '请输入开户支行' }]"
          />
          <div class="custom-dropdown" v-show="showDropdown">
            <div
              v-for="item in searchResults"
              :key="item.value"
              class="dropdown-item"
              @click="onSelect(item)"
            >
              {{ item.text }}
            </div>
          </div>
        </div>
        <van-field
          v-model="account"
          name="account"
          label="银行卡号"
          placeholder="银行卡号"
          :rules="[{ required: true, message: '银行卡号' }]"
          readonly
        />
        <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号' }]"
        />
        <div style="margin: 16px;">
            <!-- <van-button round block type="default" @click="backBtn" style="width: 95%;margin: 0.32rem auto;"
            >上一步</van-button> -->
          <van-button
            round
            block
            type="info"
            native-type="submit"
            color="linear-gradient(to right, #FF5851, #E9011B)"
            v-if="settle.status==-1 || settle.status==0 || settle.status==20 || settle.status==40"
            >保存</van-button
          >
        </div>
      </van-form>
      <!-- 省市区 -->
      <van-popup v-model="showPopup" position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择地址"
          :options="options"
          @close="showPopup = false"
          @change="onChange"
          @finish="onFinish"
        />
      </van-popup>
        <!-- 身份证期限 -->
        <van-popup v-model="showPickerCard" position="bottom">
            <van-picker show-toolbar :columns="columnsCard"
             @confirm="onConfirmCard" @cancel="showPickerCard = false" :value="settler_data.duration_type"/>
        </van-popup>
        <!-- 身份证发放 -->
        <van-popup v-model="showPickerCardTime" position="bottom">
            <van-datetime-picker type="date" @confirm="onConfirmCardTime" @cancel="showPickerCardTime = false"
                :min-date="minDate" :max-date="maxDate" :value="new Date(settler_data.issue_date)" swipe-duration="500">
            </van-datetime-picker>
        </van-popup>
        <!-- 身份证截止 showPickerEndTime-->
        <van-popup v-model="showPickerCardEndTime" position="bottom">
            <van-datetime-picker type="date" @confirm="onConfirmCardEndTime" @cancel="showPickerCardEndTime = false"
                :min-date="minDate" :max-date="maxDate" :value="new Date(settler_data.expiry_date)"/>
        </van-popup>
        <van-popup v-model="showExaplePopup" :style="{ width: '80%' }" >
          <div class="popup_example">
            <img :src="example.content" alt="">
            <div>{{ example.tip_msg }}</div>
          </div>
        </van-popup>
        <van-button round block type="info" @click="onDraft" style="width: 90%;margin: 0.32rem auto;"  v-if="settle.id<=0"
        color="linear-gradient(to right, #FF5851, #E9011B)">暂存草稿</van-button>
    </div>
  </template>
  <script>
  import { CATE_LIST, OCR_RECOGNIZE, BANK_BRANCH,CACHE_INFO, CACHE_COMMIT } from "@/api/mine";
  import { getOssParams, uploadImage, uploadDelete ,getExampleList} from "@/api/upload";
  import { REGION_LIST } from "@/api/home";
import {parseTime} from '@/tool/methods'
import { setImageUrl ,getImageUrl} from '@/api/upload'; // Adjust the path accordingly

  export default {
      props:['settle'],
    data() {
      return {
        example:{},
            showExaplePopup:false,
        minDate: new Date(1937, 0, 1),
        maxDate: new Date(2099, 10, 1),
        // 身份证日期
        showPickerCard:false,
        showPickerCardTime:false,
        showPickerCardEndTime:false,
        card_url:[],
        selectAreaList: [], // 已选中地区
        showPopup: false,
        cascaderValue: "",
        options: [],
        tabIndex: 0,
        region_code: "",
        region_name: "",
        bank_name: "",
        branch_name: "",
        account: "",
        phone: "",
        searchResults: [],
        isLoading: false,
        showDropdown: false,
        settler_data:{},
        authorize_url:[],
        columnsCard:['长期','短期'],
        back_url:[],
        front_url: [],
        valueArray:[],
        bank_back_url:[],
        owner_hold_url:[]
      };
    },
    created(){
    this.debouncedSearch = this.debounce(this.onSearch, 300);

  },
    mounted() {
    window.scrollTo(0, 0)

      console.log("法人");
      // this.debouncedSearch = this.debounce(this.onSearch, 300);
      this.fetchRegions(1, 0);
        // console.log(this.settle,6666);
      this.getInfo()
    },
    watch: {
      branch_name(value) {
        if (value.length === 0) {
          this.searchResults = [];
          this.showDropdown = false;
        }
      },
    },
    methods: {
      async  getExample(key){
            this.example=await getExampleList(this.$http,key)
            this.showExaplePopup=true
        },
      async getInfo(){
      this.example=await getExampleList(this.$http,'merchant_reckoner_authorization')
      let params = {
        type: 'store',
        key: 'accountDataNo',

      }
      if(this.settle.id<=0){
        this.$http.get(CACHE_INFO,{params:params}).then(res=>{  
          if(res.data.content!=''){
          const data = JSON.parse(res.data.content);
            // 回显数据
            this.back_url = setImageUrl(data.settler_data.back_url) || [];
            this.front_url = setImageUrl(data.settler_data.front_url) || [];
            this.card_url = setImageUrl(data.account_data.front_url) || [];
            this.bank_back_url = setImageUrl(data.account_data.back_url) || [];
            this.owner_hold_url = setImageUrl(data.account_data.owner_hold_url) || [];
            this.authorize_url = setImageUrl(data.account_data.authorize_url) || [];
            this.region_code = data.account_data.region_code || '';
            this.region_name = data.account_data.region_name || '';
            this.bank_name = data.account_data.bank_name || '';
            this.branch_name = data.account_data.branch_name || '';
            this.account = data.account_data.account || '';
            this.phone = data.account_data.phone || '';
            this.valueArray = data.account_data.valueArray || [];
            this.settler_data = data.settler_data || {};
              // this.fetchRegions(data.valueArray[0], 1);
              // this.fetchRegions(data.valueArray[1], 2);
              // this.fetchRegions(data.valueArray[2], 3);
          }
         })
        }else{
          this.back_url = this.settle.settler_data.front_url==''?[]:[{url:this.settle.settler_data.front_url}];
        this.front_url = this.settle.settler_data.front_url==''?[]:[{url:this.settle.settler_data.front_url}];

        this.card_url = this.settle.account_data.front_url==''?[]:[{url:this.settle.account_data.front_url}];
        this.bank_back_url = this.settle.account_data.back_url==''?[]:[{url:this.settle.account_data.back_url}];
        this.owner_hold_url = this.settle.account_data.owner_hold_url==''?[]:[{url:this.settle.account_data.owner_hold_url}];

            this.authorize_url = this.settle.account_data.authorize_url==''?[]:[{url:this.settle.account_data.authorize_url}]
          this.region_code = this.settle.account_data.region_code;
          this.region_name = this.settle.account_data.region_name;
          if(this.settle.account_data.city_code!=0){
              this.fetchRegions(this.settle.account_data.province_code, 1);
              this.fetchRegions(this.settle.account_data.city_code, 2);
              this.fetchRegions(this.settle.account_data.county_code, 3);
          }
          this.cascaderValue=this.settle.account_data.region_code;
          this.bank_name = this.settle.account_data.bank_name;
          this.branch_name = this.settle.account_data.branch_name;
          this.account = this.settle.account_data.account;
          this.phone = this.settle.account_data.phone;
          this.settler_data=this.settle.settler_data
          this.valueArray = [
   this.settle.account_data.province_code,
   this.settle.account_data.city_code ,
    this.settle.account_data.county_code==0? this.settle.account_data.region_code:this.settle.account_data.county_code
];
        }
      },
        // 上传银行卡反面
        async afterReadBackBank(file) {
      try {
        // 获取OSS上传参数
        if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
          this.ossParams = await getOssParams(this.$http);
        }
        if (!this.ossParams) {
          throw new Error("OSS参数未正确设置");
        }
        // 调用封装的上传函数
        await uploadImage(file, this.ossParams, this.bank_back_url);
      } catch (error) {
        console.error("处理上传错误:", error);
      }
    },
    // 删除银行卡反面
    uploadDleteBackBank(file) {
      console.log(file);

      this.bank_back_url = uploadDelete(file, this.bank_back_url);
      //   this.identity_card = {};
    },
            // 上传银行卡手持
    async afterReadOwner(file) {
      try {
        // 获取OSS上传参数
        if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
          this.ossParams = await getOssParams(this.$http);
        }
        if (!this.ossParams) {
          throw new Error("OSS参数未正确设置");
        }
        // 调用封装的上传函数
        await uploadImage(file, this.ossParams, this.owner_hold_url);
      } catch (error) {
        console.error("处理上传错误:", error);
      }
    },
    // 删除银行卡手持
    uploadDleteOwner(file) {
      this.owner_hold_url = uploadDelete(file, this.owner_hold_url);
      //   this.identity_card = {};
    },
    // 上传身份证正面
    async afterReadFront(file) {
      try {
        // 获取OSS上传参数
        if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
          this.ossParams = await getOssParams(this.$http);
        }
        if (!this.ossParams) {
          throw new Error("OSS参数未正确设置");
        }
        // 调用封装的上传函数
        await uploadImage(file, this.ossParams, this.front_url);
        let params = {
          type: "identity_card",
          image_url: this.front_url.map((item) => item.url)[0],
          face: true,
        };
        this.$http.post(OCR_RECOGNIZE, params).then((res) => {
          this.settler_data = res.data.identity_card;
        //   this.identity_card_no = res.data.identity_card.identity_card_no;
        });
      } catch (error) {
        console.error("处理上传错误:", error);
      }
    },
    // 删除身份证正面
    uploadDleteFront(file) {
      this.front_url = uploadDelete(file, this.front_url);
    //   this.identity_card = {};
    },
    // 上传身份证反面
    async afterReadBack(file) {
      try {
        // 获取OSS上传参数
        if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
          this.ossParams = await getOssParams(this.$http);
        }
        if (!this.ossParams) {
          throw new Error("OSS参数未正确设置");
        }
        // 调用封装的上传函数
        await uploadImage(file, this.ossParams, this.back_url);
        let params = {
          type: "identity_card",
          image_url: this.back_url.map((item) => item.url)[0],
          face: false,
        };
        this.$http.post(OCR_RECOGNIZE, params).then((res) => {
          // console.log(res);
        //   this.legal_person = res.data.identity_card;
        //   this.legal_info=res.data.identity_card

          this.settler_data.duration_type =res.data.identity_card.duration_type;
          this.settler_data.expiry_date = res.data.identity_card.expiry_date;
          this.settler_data.issue_authority =res.data.identity_card.issue_authority;
          this.settler_data.issue_date = res.data.identity_card.issue_date;
        });
      } catch (error) {
        console.error("处理上传错误:", error);
      }
    },
    // 删除身份证反面
    uploadDleteBack(file) {
      this.back_url = uploadDelete(file, this.back_url);
      // this.identity_card={}
    },
        // s身份证有效期 长期短期
        onConfirmCard(value) {
            this.settler_data.duration_type = value;
            this.showPickerCard = false;
        },
        // 身份证发放日期
        onConfirmCardTime(time){
            this.settler_data.issue_date = parseTime(time, '{y}-{m}-{d}');
            this.showPickerCardTime = false;
        },
        // 身份证截止日期
        onConfirmCardEndTime(time){
            this.settler_data.expiry_date = parseTime(time, '{y}-{m}-{d}');
            this.showPickerCardEndTime = false;
        },
      async onSearch() {
        if (this.branch_name.length > 0) {
          this.isLoading = true;
          try {
            const results = await this.mockRemoteSearch(this.branch_name);
            this.searchResults = results.map((item) => ({
              text: item.name,
              value: item.id,
            }));
            this.showDropdown = this.searchResults.length > 0;
          } catch (error) {
            console.error("搜索出错:", error);
          } finally {
            this.isLoading = false;
          }
        } else {
          this.searchResults = [];
          this.showDropdown = false;
        }
      },
      async mockRemoteSearch(keyword) {
        await new Promise((resolve) => setTimeout(resolve, 300));
        const response = await this.$http.get(BANK_BRANCH, {
          params: { name: keyword, limit: 10 },
        });
        const allItems = response.data; // 获取接口返回的数据

        return allItems.filter((item) => item.name.includes(keyword));
      },
      onSelect(item) {
        this.branch_name = item.text;
        this.showDropdown = false;
      },
      debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
          const later = () => {
            clearTimeout(timeout);
            func(...args);
          };
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
        };
      },
      // 选择器变化时的回调
      onChange(res) {
        this.tabIndex = res.tabIndex;
        if (this.tabIndex === 3) {
          return;
        }
        //   console.log(res, "jj");
        //点击加载下一级回调
        this.getSpaceListAgain(res.selectedOptions, res.value);
      },
      getSpaceListAgain(selectedOptions, value) {
        this.$http
          .get(REGION_LIST, {
            params: {
              code: value,
            },
          })
          .then((res) => {
            let { data } = res;

			if(this.tabIndex == 2 && !data.length) {
				data = [{
					code: 0,
					name: '暂不选择',
					parent_code: value
				}]
			}

            if (data && data.length) {
              this.setOptions(selectedOptions, data);
            }
          });
      },
      setOptions(selectedOptions, data) {
        let _options = this.options;
        selectedOptions.forEach((item, index) => {
          if (index) {
            //不是第一个则取下一级children
            _options = _options.children;
          }
          _options =
            _options[_options.findIndex((_item) => _item.value === item.value)];
        });
        //找到最后一级
        _options.children = data.map((item) => {
          return {
            text: item.name,
            value: item.code,
            children: this.tabIndex == 2 ? null : [],
          };
        });
      },
      // 确定省市区
      onFinish({ selectedOptions }) {
        this.showPopup = false;
        this.selectAreaList = selectedOptions;
        // console.log(this.selectAreaList);
        let selectArea=selectedOptions.filter((item) => item.value !== 0);
        this.valueArray = selectArea.map((item) => item.value);
        this.region_code=this.valueArray.slice(-1)[0]
        // console.log(this.valueArray);

        selectedOptions = selectedOptions.filter((item) => {
          return item.value !== 0;
        });

        this.region_name = selectedOptions.map((option) => option.text).join("/");
      },
      async fetchRegions(parentCode, level) {
        const res = await this.$http.get(REGION_LIST, {
          params: {
            code: parentCode,
          },
        });
        let { data } = res;

		if(level == 3 && !data.length) {
			data = [{
				name: '暂无选择',
				code: 0,
				parent_code: parentCode
			}]
		}

        // 省级
        if (level === 0) {
          data.forEach((item) => {
            this.options.push({
              text: item.name,
              value: item.code,
              children: [],
            });
          });
        } else if (level === 1) {
          // 市级数据
          const province = this.options.find((item) => item.value === parentCode);
          if (province) {
            province.children = data.map((item) => ({
              text: item.name,
              value: item.code,
              children: [],
            }));
          }
        } else if (level === 2) {
          // 区/县级数据
          this.options.forEach((province) => {
            const city = province.children.find(
              (item) => item.value === parentCode
            );
            if (city) {
              city.children = data.map((item) => ({
                text: item.name,
                value: item.code,
                children: [],
              }));
            }
          });
        } else if (level === 3) {
          // 街道数据
          this.options.forEach((province) => {
            province.children.forEach((city) => {
              const county = city.children.find(
                (item) => item.value === parentCode
              );
              if (county) {
                county.children = data.map((item) => ({
                  text: item.name,
                  value: item.code,
                }));
              }
            });
          });
        }
      },
      // 上传银行卡正面
      async afterReadFrontCard(file) {
        try {
          // 获取OSS上传参数
          if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
            this.ossParams = await getOssParams(this.$http);
          }
          if (!this.ossParams) {
            throw new Error("OSS参数未正确设置");
          }
          // 调用封装的上传函数
          await uploadImage(file, this.ossParams, this.card_url);
          let params = {
            type: "bank_card",
            image_url: this.card_url.map((item) => item.url)[0],
            //   face: true,
          };
          this.$http.post(OCR_RECOGNIZE, params).then((res) => {

            this.bank_name = res.data.bank_card.bank_name;
            //   this.bank_code=res.data.bank_card.bank_code
            this.account = res.data.bank_card.card_number;
          });
        } catch (error) {
          console.error("处理上传错误:", error);
        }
      },
      // 删除银行卡正面
      uploadDleteFrontCard(file) {
        this.card_url = uploadDelete(file, this.card_url);
        //   this.identity_card = {};
      },
      // 上传授权函
      async afterReadFrontAuth(file) {
        try {
          // 获取OSS上传参数
          if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
            this.ossParams = await getOssParams(this.$http);
          }
          if (!this.ossParams) {
            throw new Error("OSS参数未正确设置");
          }
          // 调用封装的上传函数
          await uploadImage(file, this.ossParams, this.authorize_url);
        } catch (error) {
          console.error("处理上传错误:", error);
        }
      },
      // 删除授权函
      uploadDleteFrontAuth(file) {
        this.authorize_url = uploadDelete(file, this.authorize_url);
        //   this.identity_card = {};
      },
      onSubmit(values) {
        let params={
          region_name:this.region_name,
          region_code:this.region_code,
          type:2
        }
        let accountData = {
          account_data:{
            front_url: getImageUrl(this.card_url),
            back_url: getImageUrl(this.bank_back_url),
            owner_hold_url: getImageUrl(this.owner_hold_url),
            authorize_url: getImageUrl(this.authorize_url),
            region_code: this.region_code,
            region_name: this.region_name,
            bank_name: this.bank_name,
            branch_name: this.branch_name,
            account: this.account,
            phone: this.phone,
            valueArray: this.valueArray,
          },
          settler_data:{
            ...this.settler_data,
            back_url: getImageUrl(this.back_url),
            front_url: getImageUrl(this.front_url),
          }
        };
        let data={
                type:'store',
                key:'accountDataNo',
                content:JSON.stringify(accountData)
            }
            if(this.settle.id<=0){
                this.$http.post(CACHE_COMMIT,data).then(res=>{
                })
            }
          this.$emit("noCorporate", values,this.valueArray,params,this.settler_data);
      },
      onDraft(){
        let accountData = {
          account_data:{
            front_url: getImageUrl(this.card_url),
            back_url: getImageUrl(this.bank_back_url),
            owner_hold_url: getImageUrl(this.owner_hold_url),
            authorize_url: getImageUrl(this.authorize_url),
            region_code: this.region_code,
            region_name: this.region_name,
            bank_name: this.bank_name,
            branch_name: this.branch_name,
            account: this.account,
            phone: this.phone,
            valueArray: this.valueArray,
          },
          settler_data:{
            ...this.settler_data,
            back_url: getImageUrl(this.back_url),
            front_url: getImageUrl(this.front_url),
          }
        };
        let data={
                type:'store',
                key:'accountDataNo',
                content:JSON.stringify(accountData)
            }
            this.$http.post(CACHE_COMMIT,data).then(res=>{
                  this.$toast('暂存成功')
            })
      },
      backBtn(){
        this.$emit("settle",1)
    }
    },

  };
  </script>
  <style scoped lang="scss">
  .shop_info {
    ::v-deep .van-icon {
      color: #c0c0c0 !important;
    }
  }
  .search-container {
    position: relative;
    z-index: 10;
  }
  .custom-dropdown {
    position: absolute;
    width: auto;
    max-height: 4rem;
    overflow: auto;
    top: 100%;
    right: 10px;
    font-size: 0.24rem;
    background-color: #fff;
    border: 1px solid #dcdee0;
    border-radius: 5px;
    box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
  }

  .dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
  }

  .dropdown-item:hover::after {
    border-color: transparent transparent red transparent; /* 悬停时三角形颜色 */
  }

  .dropdown-item:hover {
    // color: red;
  }
  .enterise_info_title {
    font-size: 0.28rem;
    font-weight: bold;
    background: #fff;
    padding: 0.2rem;

    span {
      color: red;
    }
  }

  .tianjia_pic {
    width: 100%;
  }

  .tianjia_text {
    width: 100%;
    position: absolute;
    bottom: -20px;
    left: 30%;
    transform: translateX(-50%);
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.24rem;
    color: #999999;
    // line-height: 17px;
    font-style: normal;
  }
  .tianjia_text1 {
  width: 100%;
  position: absolute;
  bottom: -20px;
  left: 10%;
  transform: translateX(-50%);
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 0.24rem;
  color: #999999;
  // line-height: 17px;
  font-style: normal;
}

  .enterise_info_tab {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;

    &_btn {
      width: 30%;
      border-radius: 0.15rem;
    }
  }

  .enterise_info_upload_title {
    font-size: 0.28rem;
    font-weight: bold;
    background: #fff;
    // padding: 0.2rem;
    text-align: center;
  }

  .shop_upload {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 0.2rem;

    .shop_upload_text {
      line-height: 0.5rem;

      div:nth-child(1) {
        font-size: 0.3rem;
        font-weight: bold;
      }

      div:nth-child(2) {
        font-size: 0.28rem;
        font-weight: 500;
      }

      div:nth-child(3) {
        font-size: 0.24rem;
        font-weight: 500;
        color: red;
      }
    }
  }
  .popup_example{
    padding-bottom: 0.2rem;
    img{
        width: 100%;
    }
    div{
        padding: 0 .12rem;
        box-sizing: border-box;
        font-size: 0.28rem;
    }

}
  </style>
